<template>
  <div>
    <div style="position: fixed;width: 100%;">
      <mt-header title="我的创作">
      </mt-header>
    </div>
    <div style="height: 40px"></div>

    <div class="page-infinite-wrapper">
      <ul
        class="page-infinite-list"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        v-infinite-scroll="loadMore">
        <li @click="clickItem(item)" class="page-infinite-listitem" v-for="item in list">
          <div>{{ item.title+(item.isPublic==1?'已发布':'未发布') }}</div>
          <div>{{item.createTime}}</div>
        </li>
      </ul>
    </div>

    <mt-palette-button :radius="80" @collapse="main_log('collapse')" @expand="main_log('expand')"
                       @expanded="main_log('expanded')"
                       class="pb " content="+" mainButtonStyle="color:#fff;background-color:#26a2ff;" ref="target_1"
    >

      <div @touchend="sub_log" @click.self="gotowrite" class="my-icon-button indexicon icon-popup iconfont iconbianji"></div>
      <div @click.self="click2" @touchend="sub_log(2)"
           class="my-icon-button indexicon icon-popup iconfont iconrefresh-1-copy"></div>
      <div @touchend="sub_log(2)" @click.self="tixian" class="my-icon-button indexicon icon-popup iconfont iconqian4"></div>

    </mt-palette-button>

  </div>
</template>
<style scoped>
  .pb {
    bottom: 23px;
    right: 28px;
    position: fixed;
  }

  .my-icon-button {
    width: 50px;
    height: 50px;
    border-radius: 90%;
    background-color: #26a2ff;
    color: #fff;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 2px;
    left: 2px;
  }


  .expand .palette-button-6-sub-0 {
    transform: translate(-100.00px, 0.00px) rotate(720deg);
    transition-delay: 0s;
    font-size: 22px;
  }

  .expand .palette-button-6-sub-1 {
    transform: translate(-67.39px, -69.27px) rotate(720deg);
    transition-delay: 0.03s;
    font-size: 23px;
  }

  .expand .palette-button-6-sub-2 {
    transform: translate(-5.39px, -100.27px) rotate(720deg);
    transition-delay: 0.06s;
    font-size: 23px;
  }

  .expand .palette-button-6-sub-3 {
    transform: translate(-38.27px, -92.39px) rotate(720deg);
    transition-delay: 0.09s;
  }

  .page-infinite-wrapper {
    margin-top: -1px;
    overflow: scroll;

  }

  .page-infinite-listitem:first-child {
    border-top: 1px solid #eee;
  }

  ol, ul {
    list-style: none outside none;
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-infinite-listitem {
    height: 50px;
    line-height: 50px;
    font-size: 13px;
  }

  .page-infinite-desc, .page-infinite-listitem {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;

  }
</style>
<script>
  import { Indicator } from 'mint-ui';
  import {InfiniteScroll} from 'mint-ui';
  import {getArticleList} from '../api/api'

  export default {
    components: {InfiniteScroll,Indicator},
    name: 'article-list',
    data() {
      return {
        list: [],
        loading: false,
      }
    },
    mounted() {
      this.getArticleList();
    },


    methods: {
      tixian(){
        this.$router.push('/money');
      },
      clickItem(item) {
        let path = item.isPublic == 1 ? '/page?id=' + item.id : '/write?id=' + item.id;
        this.$router.push(path);
      },
      loadMore() {
        this.loading = true;
        setTimeout(() => {

          this.loading = false;
        }, 2500);
      },
      getArticleList() {
        let openid = sessionStorage.getItem('openid');
        let params = {
          openid: openid
        }
        Indicator.open('加载中...');
        getArticleList(params).then((res) => {
          Indicator.close();
          this.list = res.data.data;
        });
      },

      toPage() {
        console.log(1);
      },
      main_log(val) {
        console.log('main_log', val);
      },
      click2() {
        this.getArticleList();
      },
      sub_log(val) {



        this.$refs.target_1.collapse();
      },
      gotowrite() {
        this.$router.push('/write');
      }
    },
    watch: {
      '$store.state.dataChanged'(r1, r2) {
        this.getArticleList();
      }


    }
  }
</script>
